<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Web Media API Snapshot Test Suite</title>
    <link rel="stylesheet" href="css/bulma-0.7.5/bulma.min.css" />
    <link rel="stylesheet" href="css/fontawesome.min.css" />
    <script src="lib/keycodes.js"></script>
    <script src="lib/wave-service.js"></script>
    <script src="lib/davidshimjs/qrcode.js"></script>
  </head>

  <body>
    <section class="section">
      <div class="container">
        <img
          style="max-width: 300px; margin-bottom: 30px; margin-left: -15px;"
          src="res/wavelogo_2016.jpg"
          alt="WAVE (Web Application Video Ecosystem) Project Logo"
        />

        <h1 class="title is-spaced">
          WAVE WMAS Test Suite
        </h1>
				<p class="subtitle">
          <a href="https://github.com/w3c/webmediaapi/">GitHub</a> -
        </p>
      </div>

      <div class="container" style="margin-top: 2em;">
        <h2 class="title is-5">
          New test session
        </h2>
        <div class="columns is-vcentered" style="margin-top: 20px">
          <div class="column is-narrow">
            <div
              id="qr-code"
              style="width: 256px; height: 256px; padding: 5px; border: 1px gray solid; border-radius: 3px;"
            ></div>
          </div>
          <div class="column">
            <table style="margin-bottom: 1.5em">
              <tr>
                <td class="has-text-weight-bold" style="padding-right: 1rem">
                  Token:
                </td>
                <td id="session-token" class="is-family-monospace"></td>
              </tr>
              <tr>
                <td class="has-text-weight-bold" style="padding-right: 1rem">
                  Expires:
                </td>
                <td id="expiary-date"></td>
              </tr>
              <tr>
                <td></td>
                <td>
                  <p class="is-size-7">(Session start revokes expiration.)</p>
                </td>
              </tr>
            </table>

            <p style="max-width: 32rem; margin-bottom: 1rem;">
              Configure a new session on a second device by scanning the
              QR-Code, or click the button:
            </p>
            <div
              class="button"
              style="margin-bottom: 1rem;"
              id="configure-button"
            >
              <span class="icon"><i class="fas fa-sliders-h"></i></span>
              <span>Configure Session</span>
            </div>
            <p style="max-width: 32rem;">
              The tests will start running in this window, as soon as the
              session is started from the configuration view.
            </p>
          </div>
        </div>
      </div>

      <div class="container" style="margin-top: 2em;">
        <h2 class="title is-5">
          Resume running session
        </h2>
        <article
          id="unknown_token_error"
          style="max-width: 30em; display: none"
          class="message is-danger"
        >
          <div class="message-body">
            Unknown token
          </div>
        </article>
        <div class="columns is-vcentered">
          <div id="resume_token" class="column is-narrow"></div>
          <div class="button-group column">
            <button
              id="resume-button"
              class="button is-success tabbable"
              type="submit"
              data-uid="100"
              autofocus
            >
              <span class="icon"><i class="fas fa-redo"></i></span>
              <span>Resume</span>
            </button>
          </div>
        </div>
      </div>
    </section>

		<script>
			var selectedTabbable = -1;

			function removeClass(element, className) {
				var elementClass = element.className;
				var index = elementClass.indexOf(className);
				if (index !== -1) {
					element.className = elementClass.replace(className, "");
				}
			}

			function addClass(element, className) {
				element.className += " " + className;
			}

			function skipFocus(steps) {
				var tabbables = document.getElementsByClassName("tabbable");
				if (selectedTabbable === -1) {
					selectedTabbable = 0;
				} else {
					removeClass(tabbables[selectedTabbable], "focused");
					selectedTabbable += steps;
				}

				if (selectedTabbable >= tabbables.length) {
					selectedTabbable = 0;
				}

				if (selectedTabbable < 0) {
					selectedTabbable = tabbables.length - 1;
				}

				tabbables[selectedTabbable].focus();
				addClass(tabbables[selectedTabbable], "focused");
			}

			function focusNext() {
				skipFocus(1);
			}

			function focusPrevious() {
				skipFocus(-1);
			}

			// Resume
			var resumeToken = "";
			var cookies = document.cookie.split(";");
			for (var i = 0; i < cookies.length; i++) {
				var cookie = cookies[i];
				if (cookie.split("=")[0].replace(/ /g, "") === "resume_token") {
					resumeToken = cookie.split("=")[1];
					break;
				}
			}
			if (!resumeToken) resumeToken = "";

			var resumeButton = document.getElementById("resume-button");

			var tokenText = document.getElementById("resume_token");
			if (resumeToken) {
				tokenText.innerText = "Last session: " + resumeToken;
			} else {
				tokenText.innerText = "No recent session.";
				resumeButton.setAttribute("disabled", "");
			}
			var unknownTokenError = document.getElementById("unknown_token_error");
			resumeButton.onclick = function(event) {
				location.href = WEB_ROOT + "next.html?token=" + resumeToken;
			};

			resumeButton.onkeydown = function(event) {
				var charCode =
					typeof event.which === "number" ? event.which : event.keyCode;
				if (ACTION_KEYS.indexOf(charCode) === -1) return;
				location.href = WEB_ROOT + "next.html?token=" + resumeToken;
			};

			document.onkeydown = function(event) {
				event = event || window.event;
				var charCode =
					typeof event.which === "number" ? event.which : event.keyCode;

				if (ACTION_KEYS.indexOf(charCode) !== -1) {
					event.preventDefault();
					var tabbables = document.getElementsByClassName("tabbable");
					var element = tabbables[selectedTabbable];
					if (!element) return;
					if (element.type === "checkbox") {
						element.checked = !element.checked;
					} else {
						element.click();
					}
				}

				if (PREV_KEYS.indexOf(charCode) !== -1) {
					focusPrevious();
				}

				if (NEXT_KEYS.indexOf(charCode) !== -1) {
					focusNext();
				}
			};

			var lifeTime = 30 * 60 * 1000; // 30min
			WaveService.createSession(
				{ expirationDate: new Date().getTime() + lifeTime },
				function(token) {
					var sessionTokenElement = document.getElementById("session-token");
					sessionTokenElement.innerText = token;

					WaveService.readSession(token, function(config) {
						var expiaryDateElement = document.getElementById("expiary-date");
						expiaryDateElement.innerText = new Date(
							config.expirationDate
						).toLocaleString();
					});

					var configurationUrl =
						location.origin +
						WEB_ROOT + "configuration.html?token=" +
						token +
						"&resume=" +
						resumeToken;
					new QRCode(document.getElementById("qr-code"), configurationUrl);
					document.getElementById("configure-button").onclick = function() {
						window.open(configurationUrl, "_blank");
					};

					WaveService.connectHttpPolling(token);
					WaveService.onMessage(function(message) {
						if (message.type === "resume") {
							var resumeToken = message.data;
							location.href = WEB_ROOT + "next.html?token=" + resumeToken;
						}

						if (message.type !== "status") return;
						if (message.data === "pending") return;
						location.href = WEB_ROOT + "next.html?token=" + token;
					});
				}
			);
			document.getElementById("resume-button").focus();
		</script>
  </body>
</html>
